<template>
  <div class="mainBox">
    <div class="optionBox">
      <div class="optionItem">
        订单号: <i-input v-model="queryParams.orderNo" placeholder="请输入订单号" style="width: 200px" />
      </div>
      <div class="optionItem">
        收款支付宝账户: 
        <i-select v-model="queryParams.account" style="width:200px">
          <i-option v-for="item in merchantAccountList" :value="item.account" :key="item.id">{{ item.zfbAccount }}</i-option>
        </i-select>
      </div>
      <div class="optionItem">
        订单日期: <DatePicker v-model="queryParams.queryDate" @on-ok="handleQueryDateSelectConfirm" type="datetimerange" format="yyyy-MM-dd" placeholder="请选择订单创建时间段" style="width: 200px"></DatePicker>
      </div>
      <div class="optionItem">
        订单状态: 
        <i-select v-model="queryParams.status" style="width:130px">
          <i-option v-for="item in orderStatus" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
      </div>
      <div class="optionItem">
        <Button type="primary" @click="listPayOrder">查询</Button>
      </div>
      <div class="clearBox"></div>
    </div>
    <div>
      <div class="statisticsDataBox">
        <Tag color="primary">订单总金额: <span class="moenyBox">{{statisticsData.totalAmount}}</span>元</Tag> 
        <Tag color="primary">总消耗服务费: <span class="moenyBox">{{statisticsData.totalServiceCharge}}</span>元</Tag> 
        <Tag color="success">支付成功总金额: <span class="moenyBox">{{statisticsData.payedAmount}}</span>元</Tag> 
        <Tag color="success">回调通知成功总金额: <span class="moenyBox">{{statisticsData.notifyAmount}}</span>元</Tag> 
        <Tag color="warning">当前查询条件下的总订单金额: <span class="moenyBox">{{statisticsData.currentStatusAmount}}</span>元</Tag> 
      </div>
    </div>
    <div class="tableBox">
      <Table stripe :columns="merchantPayOrderTable.columns" :data="merchantPayOrderTable.data" width="90%"></Table>
    </div>
    <div class="pageBox">
      <Page :total="merchantPayOrderTable.total" v-on:on-change="pageNumChange" v-on:on-page-size-change="pageRowsChange" show-elevator show-sizer />
    </div>
  </div>
</template>

<script>
import MerchantInfoApi from "@/apis/MerchantInfoManage";
import ServerResponseCode from "@/utils/ServerResponseCode";
import MerchantPayOrderManage from "@/apis/MerchantPayOrderManage";
import {formatDate} from "@/utils/util";

export default {
  data() {
    return {
      title: "商户信息管理",
      // 商户订单数据表
      merchantPayOrderTable: {
        columns: [
          { key: "id", title: "操作", width: 120, fixed: 'left',
          render: (h, params) => {
              return h('div', [
                 this.showReplacementOrderBtn(h, params.row)
              ]);
          }},
          { key: "orderNo", title: "订单号", width: 260},
          { key: "merCode", title: "商户号", width: 80 },
          { key: "account", title: "收款账号", width: 220,
            render: (h, params) => {
                return h('div', [
                  this.getZfbAccount(h, params.row.account)
                ]);
            } },
          { key: "orderAmount", title: "订单金额(元)", width: 160 },
          { key: "serviceCharge", title: "服务费(元)", width: 120 },
          { key: "realPayAmount", title: "实际支付金额(元)", width: 140 },
          { key: "status", title: "订单状态", width: 160,
            render: (h, params) => {
                return h('div', [
                  this.getStatusMsg(h, params.row.status)
                ]);
            }
          },
          { key: "createTime", title: "创建时间"}
        ],
        data: [],
        total: 0
      },
      // 分页查询对象
      queryParams: {
        page: 1,
        rows: 10,
        account: null,
        orderNo: null,
        status: null,
        startTime: null,
        endTime: null,
        queryDate: null,
      },
      // 收款账号集合
      merchantAccountList:[
      ],
      orderStatus: [
        {value: -1, label:"全部"},
        {value: 0, label:"待支付"},
        {value: 1, label:"订单超时"},
        {value: 2, label:"支付成功"},
        {value: 3, label:"回调通知中"},
        {value: 4, label:"回调通知成功"},
        {value: 5, label:"回调通知失败"},
        {value: 6, label:"补单通知成功"},
        {value: 7, label:"补单通知失败"},
      ],
      // 统计数据
      statisticsData: {
        // 总的订单金额，单位元
        totalAmount: "0.00",
        // 总消耗的服务费
        totalServiceCharge: "0.00",
        // 支付成功总金额
        payedAmount: "0.00",
        // 回调通知成功金额
        notifyAmount: "0.00",
        // 当前状态下的总金额
        currentStatusAmount: "0.00",
      }
    }
  },
  methods: {
    // 查询商户下的收款账号集合
    listMerchantAccountList() {
      MerchantInfoApi.fetchMerchantAccountList().then(response => {
        if (response.code === ServerResponseCode.SUCCESS) {
          this.merchantAccountList = response.data;
        } else {
          this.$Message.warning(response.msg);
        }
      });
    },
    // 分页查询订单数据集合
    listPayOrder() {
      console.log(this.queryParams);
      MerchantPayOrderManage.fetchList(this.queryParams).then(response => {
        if (response.code === ServerResponseCode.SUCCESS) {
          this.merchantPayOrderTable.data = response.data.records;
          this.merchantPayOrderTable.total = response.data.total;
          this.statisticsData = response.data.condition;
        } else {
          this.$Message.warning(response.msg);
        }
      });
    },
    // 发起补单处理
    doReplacementOrder(orderNo, account) {
      this.$Modal.confirm({
          title: '补单通知提示',
          content: '您确定要发起补单通知吗？',
          onOk: () => {
            MerchantPayOrderManage.replacementOrder(orderNo, account).then(response => {
              let type = "warning";
              if (response.code === ServerResponseCode.SUCCESS) {
                type = "success";
                // 重新查询数据
                this.listPayOrder();
              }
              this.$Message.warning(response.msg);
            });
          }
      });
    },
    // 根据订单状态获取订单状态文字
    getStatusMsg(h, status) {
      let statusMsg = '待支付';
      let _type = 'default';
      switch(status) {
        case 1:
          statusMsg = "订单超时";
          _type = 'warning';
          break;
        case 2:
          statusMsg = "支付成功";
          _type = 'success';
          break;
        case 3:
          statusMsg = "回调通知中";
          _type = 'primary';
          break;
        case 4:
          statusMsg = "回调通知成功";
          _type = 'success';
          break;
        case 5:
          statusMsg = "回调通知失败";
          _type = 'error';
          break;
        case 6:
          statusMsg = "补单通知成功";
          _type = 'success';
          break;
        case 7:
          statusMsg = "补单通知失败";
          _type = 'error';
          break;
      }
      return h('Tag', {
                props: {
                    color: _type,
                    size: 'small'
                }
              }, statusMsg);
    },
    getZfbAccount(h, account) {
      for(let i=0; i<this.merchantAccountList.length; i++) {
        let merchantAccount = this.merchantAccountList[i];
        if(account === merchantAccount.account) {
          return h('strong', merchantAccount.zfbAccount);
        }
      }
    },
    // 根据状态展示补单按钮
    showReplacementOrderBtn(h, row) {
      let status = row.status;
      let isShowBtn = false;
      switch(status) {
        case 1: // 支付中
          isShowBtn = true;
          break;
        case 2: // 支付成功
          isShowBtn = true;
          break;
        case 3: // 回调通知中
          isShowBtn = false;
          break;
        case 5: // 回调通知失败
          isShowBtn = true;
          break;
        case 7: // 补单通知失败
          isShowBtn = true;
          break;
      }
      if(isShowBtn) {
        return h('Button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  on: {
                    click: () => {
                      this.doReplacementOrder(row.orderNo, row.account);
                    }
                  }
              }, '发起补单通知');
      }
      return h();
    },
    // 分页中的页码变动事件
    pageNumChange(pageNum) {
      this.queryParams.page = pageNum;
      // 重新查询数据
      this.listPayOrder();
    },
    // 分页中的每页行数变动事件
    pageRowsChange(pageRows) {
      this.queryParams.rows = pageRows;
      // 重新查询数据
      this.listPayOrder();
    },
    // 处理查询日期确定时间
    handleQueryDateSelectConfirm() {
      this.queryParams.startTime = formatDate(this.queryParams.queryDate[0], "yyyy-MM-dd");
      this.queryParams.endTime = formatDate(this.queryParams.queryDate[1], "yyyy-MM-dd");
    }
  },
  // 组件挂载时执行
  mounted() {
    this.listMerchantAccountList();
    this.listPayOrder();
  }
};
</script >

<style scoped>

.mainBox{
  // padding: 10px;
}

.optionBox {
  margin: 5px;
}
.clearBox{
  clear: both;
}
.optionItem{
  float: left;
  margin-right: 5px;
}
.statisticsDataBox{
  padding: 10px 0;
}
.statisticsDataBox .moenyBox {
  color: #ffffff;
  font-weight: bold;
  padding: 0 5px;
}
.statisticsDataBox .tag{
  padding: 5px;
}

.tableBox .Table{
  height: 90%;
  width: 90%;
}

.pageBox{
  text-align: right;
  padding: 5px 20px;
}
</style>


